<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<base href="<%=basePath%>">
<title>YP.ShO购</title>
<link rel="stylesheet" href="css/bootstrap.css"></link>
<link rel="stylesheet" href="css/style.css"></link>
<link rel="stylesheet" href="css/myButton.css"></link>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easydropdown.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- 导入加载地址下拉栏所需js文件-->
<script src="myAddress/js/distpicker.js" charset="utf-8"></script>
<!-- 导入初始化地址和处理地址格式所需js文件-->
<script src="myAddress/js/myAddress.js" charset="utf-8"></script>
<script type="text/javascript">
	/* 初始化地址和处理地址格式下拉框的js */
	var addressId = "userAddress";
	var selectId = "addressList";
	/* 控制下拉js 结束 */

	function userInfoCheck() {
		var userName = $("#userName").val();
		var userPassword = $("#userPassword").val();
		var userPhone = $("#userPhone").val();
		var checkPassword = $("#checkPassword").val();
		if (checkPassword != userPassword) {
			alert("两次输入的密码不一致!");
			$("#userPaassword").focus();
			$("#userPassword").val("${user.password}");
			return false;
		}
		if (userName.length<1||userName.length>16) {
			alert("请输入不超过16位的用户名");
			document.getElementById("userName").focus();
			$("#userName").val("${user.name}");
			return false;
		}
		if (userPassword.length<1||userPassword.length>16) {
			alert("请输入不超过16位的密码");
			document.getElementById("userPassword").focus();
			$("#userPassword").val("${user.password}");
			return false;
		}
		if (userPhone.length != 11) {
			alert("请输入11位的手机号");
			document.getElementById("userPhone").focus();
			$("#userPhone").val("${user.phone}");
			return false;
		}
		getFormatAddress("province", "city", "district", "street");
		if (confirm('您是否要保存个人信息？')) {
			document.getElementById("userInfor").submit();
		} else {
			return false;
		}
	}

	function showEdit() {
		var input = document.getElementById("userInfor").getElementsByTagName("input");
		for (var i = 0; i < input.length; i++) {
			if (input[i].type == "text"||input[i].type == "password") {
				input[i].readOnly = false;
			}
		}
		document.getElementById('userSex').disabled = false;
		document.getElementById('userInforSubmit').style = "visibility: visible";
		document.getElementById('file').style = "visibility: visible";
		var select = document.getElementById('addressList')
				.getElementsByTagName("select");
		for (var i = 0; i < select.length; i++) {
			select[i].disabled = false;
		}
	}
	
	function fileSubmit() {
		var formData = new FormData($("#file")[0]);
		$.ajax({
			url : "fileUpload.action",
			type : "post",
			data : formData,
			contentType: false,
			processData: false,  
		    dataType: "json", 
			success : function(data) {
				var datas = JSON.parse(data);
				var message = datas.message;
				var flag = datas.flag;
				var imgPath = datas.imgPath;
				alert(message);
				if(flag == "success"){
					$("#userImg").attr("src",imgPath);
					$("#imgPath").val(imgPath);
				}
			},
			error : function() {
				alert("与服务器同步失败");
			}
		}); 
	}
	
</script>
<style type="text/css">
.form p {
	margin-bottom: 15px;
}

.form label {
	width: 8em;
}
</style>
</head>
<body>
	<%@include file="../common/head.jsp"%>
	<div class="menu"></div>
	<div class="men">
		<div class="container">
			<div class="col-md-3 sidebar">
				<div class="block block-layered-nav">
					<div class="block-title">
						<strong><span>我的YPShO购</span></strong>
					</div>
					<div class="block-content">
						<dl id="narrow-by-list">
							<dt class="last odd">用户中心</dt>
							<dd class="last odd">
								<ol>
									<li><a href="userInforView" style="color:#e05b5b">个人信息管理</a></li>
								</ol>
							</dd>
							<dt class="last odd">我是买家</dt>
							<dd class="last odd">
								<ol>
									<li><a href="userOrders">我的订单管理</a></li>
									<li><a href="userCart">我的购物车</a></li>
								</ol>
							</dd>
							<dt class="last odd">我是卖家</dt>
							<dd class="last odd">
								<ol>
									<li><a href="sellerOrders">我的订单管理</a></li>
									<li><a href="sellerGoods">我的商品管理</a></li>
								</ol>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<div class="col-md-9">
				<div class="mens-toolbar">
					<div class="sort">
						<div class="sort-by" style="float:left">
							<label>个人信息管理</label>
						</div>
					</div>
					<div class="sort" style="float:right">
						<div class="sort-by" style="float:right">
							<input type="button" class="button orange medium" style="margin-top: 0px" onclick="showEdit()" value="编辑">
						</div>
					</div>
				</div>
				<div class="form">
				<form action="userInforEdit.action" id="userInfor">
					<p>
						<label>用户头像：</label>
						<s:if test="user.img==null||user.img==''">
						<span><img alt="请上传用户头像" src="uploadImg/userImg/default.jpg" width="150px" id="userImg"></span></s:if>
						<s:else>
						<span><img alt="请上传用户头像" src="${user.img }" width="150px" id="userImg"></span></s:else>
						<input type="hidden" name="user.img" id="imgPath">
						<span class="redstar">*</span>
					</p>
					<p>
						<label>用户名称：</label>
						<span><input type="text" name="user.name" value="${user.name }"  id="userName" readonly="readonly"/></span>
						<span class="redstar">*</span>
					</p>
					<p>
						<label>邮箱地址：</label>
						<span><input type="text" name="user.email" value="${user.email }" id="userEmail" readonly="readonly"/></span>
					</p>
					<p>
						<label>用户密码：</label>
						<span><input type="password" name="user.password" value="${user.password }" id="userPassword" readonly="readonly"/></span>
						<span class="redstar">*</span>
					</p>
					<p>
						<label>确认密码：</label>
						<span><input type="password" value="${user.password }" id="checkPassword"/></span>
						<span class="redstar">*</span>
					</p>
					<p>
						<label>性别：</label> 
						<span> 
						<select id="userSex" name="user.sex" disabled="disabled">
								<option value="1">男</option>
								<option value="0">女</option>
						</select> 
						</span>
						<script type="text/javascript">
							var x = "${user.sex }";
							var sel = document.getElementById('userSex');
							for (var i = 0; i < sel.options.length; i++) {
								if (sel.options[i].value == x) {
									sel.options[i].selected = true;
									break;
								}
							}
						</script>
					</p>
					<p>
						<label>联系电话：</label>
							<span>
							<input type="text" name="user.phone" value="${user.phone }" id="userPhone" readonly="readonly"/>
							</span>
							<span class="redstar">*</span>
					</p>
					<p>
						<label>收货地址：</label>
						<span>
							<input type="text" name="user.address" value="${user.address }" id="userAddress"/>
							<span id="addressList">
								<select id="province" disabled="disabled"></select> 
								<select id="city" disabled="disabled"></select>
								<select id="district" disabled="disabled"></select>
							</span>
						</span>
					</p>
					<p>
						<label>详细地址：</label>
						<span>
							<input type="text" id="street" readonly="readonly">
						</span>
					</p>
				</form>
				<form action="fileUpload.action" enctype="multipart/form-data" method="post" id="file" style="visibility: hidden;">
					<p>
						<label>上传头像：</label>
				        <input type="file" id="file" name="image" style="display:inline;"/>
				        <input type="hidden" name="imgFrom" value="userInfo">
				        <input type="button" value="上传" class="button rosy medium" style="display:inline;" onclick="fileSubmit()">
			        </p>
				</form>
					<input id="userInforSubmit" type="button" value="保存用户信息" onclick="userInfoCheck()" style="visibility: hidden;" class="button red">
				</div>
			</div>
		</div>
	</div>

	<%@include file="../common/footer.jsp"%>

</body>
</html>